<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2024-03-03 12:00:33
 * @LastEditors: htang
 * @LastEditTime: 2024-03-08 09:03:01
-->
<template>
  <data class="entrance-node">
    <div class="tip">
      <span>门闸开关次数 [{{ years }}年]</span>
      <dv-decoration2 :dur="2" />
    </div>
    <div ref="entranceEcharts" id="center-entrance-echarts"></div>
  </data>
</template>

<script>
import { ref, watch, getCurrentInstance, onMounted, defineComponent, onUnmounted, nextTick } from 'vue';
import { entranceCountApi } from '/@/api/gate/index.ts';
import '@/assets/js/highcharts/highcharts.js';
import '@/assets/js/highcharts/highcharts-3d.js';
import '@/assets/js/highcharts/modules/exporting.js';
import * as echarts from 'echarts';
import moment from 'moment';
export default defineComponent({
  setup() {
    let { proxy } = getCurrentInstance();

    let years = ref('');

    /**
     * 初始化图表
     */
    function initEcharts() {
      let chartDom = document.getElementById('center-entrance-echarts');
      let myChart = echarts.init(chartDom);
      let option = {
        grid: {
          top: '20%',
          left: '7%',
          right: '7%',
          bottom: '5%',
          containLabel: true,
        },
        legend: {
          top: 15,
          data: '',
          textStyle: {
            color: '#fff',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: '#fff',
              margin: 15,
            },
            interval: 0,
          },
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [],
      };
      entranceCountApi().then((res) => {
        let data = res;
        const dates = data[0].logs.map((item) => moment(item.opearteDay).format('MM-DD'));
        let yearDate = data[0].logs.map((item) => moment(item.opearteDay).format('YYYY'));
        let y = yearDate.map((item) => moment(item).format('YYYY'));
        years.value = Array.from(new Set(y)).join(',');
        option.xAxis.data = dates;
        const series = data.map((item) => {
          let CONFIG = {
            1: '开门',
            2: '关门',
            3: '暂停',
          };
          return {
            name: CONFIG[item.operateTo],
            type: 'line',
            data: item.logs.map((log) => log.count),
          };
        });
        option.legend.data = series.map((item) => item.name);
        option.series = series;
        if (myChart) {
          myChart.resize();
        }
        option && myChart.setOption(option);
      });
    }

    onMounted(() => {
      initEcharts();
      window.addEventListener('resize', initEcharts);
    });

    return {
      years,
    };
  },
});
</script>

<style lang="less" scoped>
.entrance-node {
  width: 100%;
  height: 100%;
  margin: 0 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.01) 100%);
  backdrop-filter: blur(100px);
  .tip {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-39.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    .dv-decoration-2 {
      position: absolute;
      bottom: 0;
      left: 11px;
      width: 95%;
      height: 5px;
    }
  }
  #center-entrance-echarts {
    width: 100%;
    height: calc(100% - 44px);
  }
}
</style>